<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Xenon Boostrap Admin Panel" />
    <meta name="author" content="" />

    <title>Xenon - Data Tables</title>

    <!--字体图标-->
    <link href="javaex/pc/css/icomoon.css" rel="stylesheet" />
    <!--动画-->
    <link href="javaex/pc/css/animate.css" rel="stylesheet" />
    <!--骨架样式-->
    <link href="javaex/pc/css/common.css" rel="stylesheet" />
    <!--皮肤（缇娜）-->
    <!-- <link href="javaex/pc/css/skin/tina.css" rel="stylesheet" />-->
    <!--jquery，不可修改版本-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!--全局动态修改-->
    <script src="javaex/pc/js/common.js"></script>
    <!--核心组件-->
    <script src="javaex/pc/js/javaex.min.js"></script>
    <!--表单验证-->
    <script src="javaex/pc/js/javaex-formVerify.js"></script>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
    <link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/xenon-core.css">
    <link rel="stylesheet" href="assets/css/xenon-forms.css">
    <link rel="stylesheet" href="assets/css/xenon-components.css">
    <link rel="stylesheet" href="assets/css/xenon-skins.css">
    <link rel="stylesheet" href="assets/css/custom.css">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <style>
        #yy img{
            width: 70px;
            height: 60px;
        }
    </style>

</head>
<body class="page-body">

<div class="settings-pane">

    <a href="#" data-toggle="settings-pane" data-animate="true">
        &times;
    </a>

    <div class="settings-pane-inner">

        <div class="row">

            <div class="col-md-4">

                <div class="user-info">

                    <div class="user-image">
                        <a href="javascript:;" >
                            <img th:src="${session.user.aimage}" id="pp" class="img-responsive img-circle"/>

                        </a>
                    </div>

                    <div class="user-details">

                        <h3>
                            <a href="#"><span th:text="${session.user.aname}"></span></a>

                            <!-- Available statuses: is-online, is-idle, is-busy and is-offline -->
                            <span class="user-status is-online"></span>
                        </h3>

                        <p class="user-title">程序猿</p>

                        <div class="user-links">
                            <button type="button" id="bb" class="btn btn-primary">编辑</button>
                            <a href="logout" class="btn btn-success">登出</a>
                        </div>

                    </div>

                </div>

            </div>



        </div>

    </div>

</div>

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

    <!-- Add "fixed" class to make the sidebar fixed always to the browser viewport. -->
    <!-- Adding class "toggle-others" will keep only one menu item open at a time. -->
    <!-- Adding class "collapsed" collapse sidebar root elements and show only icons. -->
    <div class="sidebar-menu toggle-others fixed">

        <div class="sidebar-menu-inner">

            <header class="logo-env">

                <!-- logo -->
                <div class="logo">
                    <a href="#" class="logo-expanded">
                        <img src="assets/images/logo@2x.png" width="80" alt=""/>
                    </a>

                    <a href="#" class="logo-collapsed">
                        <img src="assets/images/logo-collapsed@2x.png" width="40" alt=""/>
                    </a>
                </div>

                <!-- This will toggle the mobile menu and will be visible only on mobile devices -->
                <div class="mobile-menu-toggle visible-xs">
                    <a href="#" data-toggle="user-info-menu">
                        <i class="fa-bell-o"></i>
                        <span class="badge badge-success">7</span>
                    </a>

                    <a href="#" data-toggle="mobile-menu">
                        <i class="fa-bars"></i>
                    </a>
                </div>

                <!-- This will open the popup with user profile settings, you can use for any purpose, just be creative -->
                <div class="settings-icon">
                    <a href="#" data-toggle="settings-pane" data-animate="true">
                        <i class="linecons-cog"></i>
                    </a>
                </div>


            </header>


            <ul id="main-menu" class="main-menu">
                <!-- add class "multiple-expanded" to allow multiple submenus to open -->
                <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
                <li class="active opened active">
                    <a href="index">
                        <i class="linecons-cog"></i>
                        <span class="title">首页</span>
                    </a>
                </li>
                <li>
                    <a href="mapperindex">
                        <i class="linecons-desktop"></i>
                        <span class="title">超级管理员管理</span>
                    </a>
                    <ul>
                        <li>
                            <a href="mapperindex">
                                <span class="title">管理员</span>
                            </a>
                        </li>

                        <li>
                            <a href="jumproleindex">
                                <span class="title">角色管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="jumpRoute">
                        <i class="linecons-note"></i>
                        <span class="title">管理员管理</span>
                    </a>
                    <ul>
                        <li>
                            <a href="jumpRoute">
                                <span class="title">航空管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="jumpgoodslist">
                                <span class="title">商品管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="jumpBoat">
                                <span class="title">船只管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="jumpbox">
                                <span class="title">集装箱管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="orderlist.to">
                                <span class="title">订单管理</span>
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="orderstatistics.to">
                        <i class="linecons-database"></i>
                        <span class="title">统计</span>
                    </a>
                    <ul>
                        <li>
                            <a href="orderstatistics.to">
                                <span class="title">订单统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="incomeStatis.to">
                                <span class="title">收益统计</span>
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>

        </div>

    </div>

    <div class="main-content">

        <!-- User Info, Notifications and Menu Bar -->
        <nav class="navbar user-info-navbar" role="navigation">

            <!-- Left links for user info navbar -->
            <ul class="user-info-menu left-links list-inline list-unstyled">

                <li class="hidden-sm hidden-xs">
                    <a href="#" data-toggle="sidebar">
                        <i class="fa-bars"></i>
                    </a>
                </li>


            </ul>


            <!-- Right links for user info navbar -->
            <ul class="user-info-menu right-links list-inline list-unstyled">

                <li class="search-form"><!-- You can add "always-visible" to show make the search input visible -->

                </li>


                <li class="dropdown user-profile">
                    <a href="#" data-toggle="dropdown">
                        <img th:src="${session.user.aimage}" alt="user-image" class="img-circle img-inline userpic-32" width="28" />
                        <span>
								<span th:text="${session.user.aname}"></span>
								<i class="fa-angle-down"></i>
							</span>
                    </a>

                    <ul class="dropdown-menu user-profile-menu list-unstyled">
                        <li class="last">
                            <a href="logout">
                                <i class="fa-lock"></i>
                                Logout
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#" data-toggle="chat">
                        <i class="fa-comments-o"></i>
                    </a>
                </li>

            </ul>

        </nav>

        <div class="page-title">

            <div class="title-env">
                <h1 class="title">角色</h1>
                <p class="description">角色管理</p>
            </div>

            <div class="breadcrumb-env">

                <ol class="breadcrumb bc-1">
                    <li>
                        <a href="index"><i class="fa-home"></i>Home</a>
                    </li>
                    <li>

                        <a href="jumproleindex">Tables</a>
                    </li>
                    <li class="active">

                        <strong>Data Tables</strong>
                    </li>
                </ol>

            </div>

        </div>












        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Removing search and results count filter</h3>

                <div class="panel-options">

                    <button type="button" class="button blue" id="addrole">添加</button>


                    <a href="#" data-toggle="panel">
                        <span class="collapse-icon">&ndash;</span>
                        <span class="expand-icon">+</span>
                    </a>
                    <a href="#" data-toggle="remove">
                        &times;
                    </a>
                </div>
            </div><div class="panel-body">
                <table class="table table-bordered table-striped" id="example-3">
                    <thead>
                    <tr >
                        <th >
                            <input type="checkbox" name="allck" id="allck01" >
                        </th>
                        <th >ID</th>
                        <th>角色</th>
                        <th>角色描述</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody class="middle-align">

                    <tr th:each="role : ${page.rolesEntities}">
                        <td>
                            <input type="checkbox" name="ckrid" th:value="${role.rid}">
                        </td>
                        <td th:text="${role.rid}"></td>
                        <td th:text="${role.rname}"></td>
                        <td th:text="${role.rdesc}"></td>
                        <td>


                            <a href="#" th:onclick="'javascript : delrole(\'' + ${role.rid} + '\')'"  id="ii" class="btn btn-secondary btn-sm btn-icon icon-left">
                                删除
                            </a>

                            <a href="#" th:onclick="'javascript : roleedit(\''+${role.rid}+'\')'" id="mm" class="btn btn-secondary btn-sm btn-icon icon-left">
                                编辑
                            </a>
                        </td>
                    </tr>





                    </tbody>
                </table>

                <div class="col-xs-6">
                    <div class="dataTables_paginate paging_simple_numbers" id="example-2_paginate">
                        <ul class="pagination">
                            <li lass="paginate_button next" aria-controls="example-2" tabindex="0"  th:if="${page.pageNum eq 1}">
                                <a href="#" >Previous</a>
                            </li>

                            <li lass="paginate_button next"  aria-controls="example-2" tabindex="0" id="example-2_next" >

                                <span th:if="${page.pageNum > 1}">
                                    <a th:href="'jumproleindex?PageNum='+${page.pageNum - 1}+'& PageSize = '+${page.pageSize}" >Previous</a>
                                </span>
                            </li>

                            <!--  <li class="paginate_button" >
                                 <span th:each="pg : ${PageInfo.navigatepageNums}">
                                           <span th:if="${pg != PageInfo.pageNum}">

                                               <a href="javascript:void(0);" th:onclick="'javascript : fenye(\'' + ${pg} + '\',\''+ ${PageInfo.PageSize}+'\')'" >
                                                   <span th:text="${pg}"></span>


                                               </a>
                                           </span>

                                           <span th:if="${pg == PageInfo.pageNum}">
                                                   <span th:text="${pg}" class="paginate_button active"></span>
                                           </span>
                                       </span>
                               </li>-->

                            <li class="paginate_button next" aria-controls="example-2" tabindex="0" >
                                <span th:if="${page.pageNum != page.pageCount}">
                                <a th:href="'jumproleindex?PageNum='+${page.pageNum + 1}+'& PageSize = '+${page.pageSize}" >Next</a>
                                    </span>
                            </li>

                            <li class="paginate_button next" >
                                  <span th:if="${page.pageNum == page.pageCount}">
                                       <a href="#">Next</a>
                                </span>

                            </li>

                        </ul>
                    </div>
                </div>

                <!--<div class="col-xs-6">
                    <div class="dataTables_paginate paging_simple_numbers" id="example-2_paginate">
                        <ul class="pagination">
                            <li lass="paginate_button next" aria-controls="example-2" tabindex="0"  th:if="${PageInfo.pageNum eq 1}">
                                <a href="#" >Previous</a>
                            </li>

                            <li lass="paginate_button next"  aria-controls="example-2" tabindex="0" id="example-2_next" >

                                <span th:if="${PageInfo.pageNum > 1}">
                                    <a th:href="'mapperindex?PageNum='+${PageInfo.pageNum - 1}+'& PageSize = '+${PageInfo.pageSize}" >Previous</a>
                                </span>
                            </li>

                         &lt;!&ndash;  <li class="paginate_button" >
                              <span th:each="pg : ${PageInfo.navigatepageNums}">
										<span th:if="${pg != PageInfo.pageNum}">

											<a href="javascript:void(0);" th:onclick="'javascript : fenye(\'' + ${pg} + '\',\''+ ${PageInfo.PageSize}+'\')'" >
												<span th:text="${pg}"></span>


											</a>
										</span>

										<span th:if="${pg == PageInfo.pageNum}">
												<span th:text="${pg}" class="paginate_button active"></span>
										</span>
									</span>
                            </li>&ndash;&gt;

                            <li class="paginate_button next" aria-controls="example-2" tabindex="0" >

                                <a th:href="'mapperindex?PageNum='+${PageInfo.pageNum + 1}+'& PageSize = '+${PageInfo.pageSize}" >Next</a>
                            </li>

                            <li class="paginate_button next" >
                                  <span th:if="${PageInfo.pageNum eq PageInfo.pageCount}">
                                       <a href="#">Next</a>
                                </span>

                            </li>

                        </ul>
                    </div>
                </div>-->
            </div>

        </div>


        <!-- Main Footer -->
        <!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
        <!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
        <!-- Or class "fixed" to  always fix the footer to the end of page -->
        <footer class="main-footer sticky footer-type-1">

            <div class="footer-inner">

                <!-- Add your copyright text here -->
                <div class="footer-text">
                    &copy; 2014
                    <strong>Xenon</strong>
                    More Templates <a href="#" target="_blank" title="长江航运">长江航运</a> - Collect from <a href="#/" title="一家做海运的网站" target="_blank">一家做海运的网站</a>
                </div>


                <!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
                <div class="go-up">

                    <a href="#" rel="go-top">
                        <i class="fa-angle-up"></i>
                    </a>

                </div>

            </div>

        </footer>
    </div>


    <!-- start: Chat Section -->
    <div id="chat" class="fixed">

        <div class="chat-inner">


            <h2 class="chat-header">
                <a href="#" class="chat-close" data-toggle="chat">
                    <i class="fa-plus-circle rotate-45deg"></i>
                </a>

                Chat
                <span class="badge badge-success is-hidden">0</span>
            </h2>

            <script type="text/javascript">
                // Here is just a sample how to open chat conversation box
                jQuery(document).ready(function($)
                {
                    var $chat_conversation = $(".chat-conversation");

                    $(".chat-group a").on('click', function(ev)
                    {
                        ev.preventDefault();

                        $chat_conversation.toggleClass('is-open');

                        $(".chat-conversation textarea").trigger('autosize.resize').focus();
                    });

                    $(".conversation-close").on('click', function(ev)
                    {
                        ev.preventDefault();
                        $chat_conversation.removeClass('is-open');
                    });
                });
            </script>


            <div class="chat-group">
                <strong>Favorites</strong>

                <a href="#"><span class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
                <a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
            </div>


            <div class="chat-group">
                <strong>Work</strong>

                <a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Daniel A. Pena</em></a>
            </div>


            <div class="chat-group">
                <strong>Other</strong>

                <a href="#"><span class="user-status is-online"></span> <em>Dennis E. Johnson</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Stuart A. Shire</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Janet I. Matas</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Mindy A. Smith</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Herman S. Foltz</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Gregory E. Robie</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Nellie T. Foreman</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>William R. Miller</em></a>
                <a href="#"><span class="user-status is-idle"></span> <em>Vivian J. Hall</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Melinda A. Anderson</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Gary M. Mooneyham</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Robert C. Medina</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Dylan C. Bernal</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Marc P. Sanborn</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Kenneth M. Rochester</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Rachael D. Carpenter</em></a>
            </div>

        </div>

        <!-- conversation template -->
        <div class="chat-conversation">

            <div class="conversation-header">
                <a href="#" class="conversation-close">
                    &times;
                </a>

                <span class="user-status is-online"></span>
                <span class="display-name">Arlind Nushi</span>
                <small>Online</small>
            </div>

            <ul class="conversation-body">
                <li>
                    <span class="user">Arlind Nushi</span>
                    <span class="time">09:00</span>
                    <p>Are you here?</p>
                </li>
                <li class="odd">
                    <span class="user">Brandon S. Young</span>
                    <span class="time">09:25</span>
                    <p>This message is pre-queued.</p>
                </li>
                <li>
                    <span class="user">Brandon S. Young</span>
                    <span class="time">09:26</span>
                    <p>Whohoo!</p>
                </li>
                <li class="odd">
                    <span class="user">Arlind Nushi</span>
                    <span class="time">09:27</span>
                    <p>Do you like it?</p>
                </li>
            </ul>

            <div class="chat-textarea">
                <textarea class="form-control autogrow" placeholder="Type your message"></textarea>
            </div>

        </div>

    </div>
    <!-- end: Chat Section -->


</div>

<script>
    $(document).ready(function () {
        $("#allck01").click(function(){
            alert("sss");
            $("input[name='ckrid']").prop("checked",$("input[name='allck']").prop("checked"));

        });

        $("input[name='ckrid']").click(function(){

            var vt = $("input[name='ckrid']").length == $("input[name='ckrid']:checked").length;
            $("input[name='allck']").prop("checked",vt);
        });
    });

</script>

<script type="text/javascript">



    function fenye(num,size) {

        $(":input[name='PageNum']").val(num);
        $(":input[name='PageSize']").val(size);

        $("#youyou").submit();


    }
</script>

<script>


    // 或者下面这种写法
    $("#pp").click(function() {
        javaex.dialog({
            type : "image",	// 弹出层类型
            url : $(this).attr("src")	// 图片地址
        });
    });


    $("#addboat").click(function() {

        javaex.dialog({
            type : "dialog",	// 弹出层类型
            width : "900",
            height : "800",
            url : "admintijiao"
        });
    });


    $("#addrole").click(function() {

        javaex.dialog({
            type : "dialog",	// 弹出层类型
            width : "900",
            height : "800",
            url : "roleadd"
        });
    });
</script>

<script>

    $("#bb").click(function() {
        javaex.dialog({
            type : "dialog",	// 弹出层类型
            width : "400",
            height : "500",
            url : "jumpedit"
        });
    });



</script>


<script>

    function adminedit(aid) {

        $.ajax({
            url:"queryrole",
            data:{'aid':aid},
            type:"post",
            success:function (data) {

                if (data=='0000'){
                    javaex.dialog({
                        type : "dialog",	// 弹出层类型
                        width : "800",
                        height : "700",
                        url : "finaledit"
                    });
                }else {
                    alert("失败");
                }
            }
        });

    }

    function roleedit(rid) {

        $.ajax({
            url:"selrolr",
            data:{'rid':rid},
            type:"post",
            success:function (data) {

                if (data=='0000'){
                    javaex.dialog({
                        type : "dialog",	// 弹出层类型
                        width : "400",
                        height : "500",
                        url : "tanchuedit"
                    });
                }
            }
        });

    }

</script>

<script type="text/javascript">

    //删除所有
    function delAll() {

        if(!confirm("你确定要删除吗?")){
            return;
        }

        javaex.optTip({
            content : "数据提交中，请稍候...",
            type : "submit"
        });

        var length = $("input[name='ckrid']:checked").length;
        var v='';
        for (var i=0;i<length;i++){
            v += $("input[name='ckrid']:checked").eq(i).val()+",";
        }
        $.ajax({
            url:"delAlladmin",
            data:{"ids":v},
            type:"post",
            success:function (result) {
                if(result=="0000"){

                    /* parent.javaex.close();*/

                    alert("删除成功");
                    // 刷新页面
                    parent.location.reload();


                }
            }
        });
    }




    function  del(aid,astatus) {


        $.ajax({
            url:"deletebysts",
            type:"post",
            data:{'aid':aid},
            beforeSend:function(){
                if (astatus == 3){
                    alert("当前已被禁用");
                    return false;
                }else {
                    return true;
                }
            },
            success:function (data) {
                if (data == '0000'){

                    alert("已禁用");

                    $("#st"+aid).html("已禁用");
                    parent.location.reload();
                }else {
                    alert("已启用");

                    $("#st"+aid).html("已启用");
                    parent.location.reload();
                }
            }
        });

    }


    function  delrole(rid) {


        $.ajax({
            url:"deleterole",
            type:"post",
            data:{'rid':rid},
            success:function (data) {
                if (data == '0000'){

                    alert("已删除");
                    parent.location.reload();


                }else {
                    alert("未删除");


                    parent.location.reload();
                }
            }
        });

    }


    function  qiyong(aid,astatus) {


        $.ajax({
            url:"qiyongbyid",
            type:"post",
            data:{'aid':aid},
            beforeSend:function(){
                if (astatus == 2){
                    alert("当前用户状态正常");
                    return false;
                }else {
                    return true;
                }
            },
            success:function (data) {
                if (data == '0000'){

                    alert("已启用");

                    $("#st"+aid).html("已启用");
                    parent.location.reload();
                }else {
                    alert("已禁用");

                    $("#st"+aid).html("已禁用");
                    parent.location.reload();
                }
            }
        });

    }
</script>

<!-- Imported styles on this page -->
<link rel="stylesheet" href="assets/js/datatables/dataTables.bootstrap.css">

<!-- Bottom Scripts -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/resizeable.js"></script>
<script src="assets/js/joinable.js"></script>
<script src="assets/js/xenon-api.js"></script>
<script src="assets/js/xenon-toggles.js"></script>
<!--<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>-->


<!-- Imported scripts on this page -->
<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="assets/js/datatables/tabletools/dataTables.tableTools.min.js"></script>


<!-- JavaScripts initializations and stuff -->
<script src="assets/js/xenon-custom.js"></script>

</body>
</html>